<template>
  <Echart id="rightMiddle" :options="options" class="right-middle_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script>
export default {
  data () {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0
      },
      pageflag: false,
      timer: null
    };
  },
  created () {
    this.getData()
  },
  mounted () {
  },
  beforeDestroy () {
    this.clearData()
  },
  methods: {
    clearData () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData () {
      this.pageflag = true
      const res = {
        success: true,
        data: {
          offlineNum: 52,
          lockNum: 6,
          totalNum: 218,
          onlineNum: 160
        }
      }
      if (res.success) {
        this.countUserNumData = res.data
        this.$nextTick(() => {
          this.init()
        })
      } else {
        this.pageflag = false
        this.$message.error(res.msg)
      }
    },
    // 轮询
    switper () {
      if (this.timer) {
        return
      }
      const looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      const myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      });
    },
    init () {
      const total = this.countUserNumData.totalNum;
      const colors = ['#ECA444', '#33A1DB', '#56B557'];
      const piedata = {
        name: '用户总览',
        type: 'pie',
        radius: ['42%', '65%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 2
        },

        color: colors,
        data: [
          // {
          //   value: 0,
          //   name: "告警",
          //   label: {
          //     shadowColor: colors[0],
          //   },
          // },
          {
            value: this.countUserNumData.lockNum,
            name: '锁定',
            label: {
              shadowColor: colors[0]
            }
          },
          {
            value: this.countUserNumData.onlineNum,
            name: '在线',
            label: {
              shadowColor: colors[2]
            }
          },
          {
            value: this.countUserNumData.offlineNum,
            name: '离线',
            label: {
              shadowColor: colors[1]
            }
          }

        ]
      };
      this.options = {
        title: {
          // zlevel: 0,
          text: ['{value|' + total + '}', '{name|总数}'].join('\n'),
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              value: {
                color: '#ffffff',
                fontSize: 24,
                fontWeight: 'bold',
                lineHeight: 20
              },
              name: {
                color: '#ffffff',
                lineHeight: 20
              }
            }
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF'
          }
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [
          // 展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: '   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ',
              //   position: "outside",
              rich: {
                b: {
                  color: '#fff',
                  fontSize: 12,
                  lineHeight: 26
                },
                c: {
                  color: '#31ABE3',
                  fontSize: 14
                },
                per: {
                  color: '#31ABE3',
                  fontSize: 14
                }
              }
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true

            },
            emphasis: {
              show: true
            }
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: 'inherit', // 圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: 'auto',
              padding: [2.5, -2.5, 2.5, -2.5]
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false
            }
          }
        ]
      };
    }
  }
};
</script>
<style lang='scss' scoped>
</style>
